<template>
    <div>
        <el-button type="primary" @click="handleClick" plain>编辑</el-button>
        <el-button type="warning" plain @click="dialogFormVisible = true">添加</el-button>

        <!--弹出框-->
        <el-dialog v-model="dialogFormVisible" title="请填写内容" width="700">
    <tou2/>
    <!--
          <el-form :model="form">
      <el-form-item label="日期" :label-width="formLabelWidth">
        <el-input v-model="form.date1" autocomplete="off" />
      </el-form-item>
      <el-form-item label="名字" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth">
        <el-input v-model="form.state" autocomplete="off" />
        </el-form-item>
      <el-form-item label="城市" :label-width="formLabelWidth">
        <el-input v-model="form.city" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮编" :label-width="formLabelWidth">
        <el-input v-model="form.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
        <el-button type="danger" @click="handleClick" plain>删除</el-button>
        <el-button type="info" plain text-align="right">刷新</el-button>
    </div>
    <p></p>
    <div class="table" >
      <div class="table-title">
    <el-table :data="tableData" style="width: 100%" height="480px" border-radius="15px">
        <!-- 选择列 固定列 列-->
      <el-table-column type="selection" width="50px" align="center"/>
      
      <el-table-column >
      
      <el-table-column prop="xuhao" label="序号" width="60" align="center"/>
      <el-table-column prop="zhanghao" label="账号" width="100" align="center"/>
      <el-table-column prop="bumen" label="部门" width="100" align="center"/>
      <el-table-column prop="name" label="名字" width="120" align="center"/>
      <el-table-column prop="xingbie" label="性别" width="60" align="center"/>
      <el-table-column prop="number" label="电话" width="150" align="center"/>
      <el-table-column prop="email" label="邮箱" width="200" align="center"/>
      <el-table-column prop="pingtai" label="所属平台" width="100" align="center"/>
      <el-table-column fixed prop="date" label="最近日期" width="150" align="center"/>
      <el-table-column prop="denglu" label="登录" width="120" align="center"/>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="160" align="center" height="480px">
        
        <template #default>
          <el-button  type="primary" size="small" @click="handleClick">
            修改密码
          </el-button>
          <el-button  type="primary" size="small">部门</el-button>
        </template>
      </el-table-column>
      
    </el-table>
     </div>
    </div>
    <div class="demo-pagination-block">
    <!--页面标签-->
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      
    />
  </div>
  </template>
  
  <script lang="ts" setup>
import { ref ,reactive} from 'vue';
import tou2 from '@/components/caidan/tou2.vue';

const dialogFormVisible = ref(false)
const formLabelWidth = '50px'
const form = reactive({
  xuhao: '',
  zhanghao: '',
  bumen: '',
  xingbie: '',
  number: '',
  name: '',
  email: '',
  pingtai: '',
  date: '',
  denglu: '',
  date1: '',
  state: '',
  city: '',
  address: '',
  region: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})


const currentPage4 = ref(1);
const pageSize4 = ref(100);
const size = ref('small');
const disabled = ref(false);
const background = ref(false);

  const handleSizeChange = (val: string) => {
    size.value = val;
  };

  const handleCurrentChange = (val: number) => {
    currentPage4.value = val;
  };

  const handleClick = () => {
    console.log('click')
  }
  
  const tableData = [
    {
      xuhao: '1',
      zhanghao: '001',
      bumen: '管理',
      name: 'admin',
      xingbie: '男',
      number: '123456',
      email: '123456@qq.com',
      pingtai: '平台1',
      date: '2003-05-10',
      denglu: '123456',
    },
    {
      xuhao: '2',
      zhanghao: '001',
      bumen: '管理',
      name: 'admin',
      xingbie: '男',
      number: '123456',
      email: '123456@qq.com',
      pingtai: '平台1',
      date: '2003-05-10',
      denglu: '123456',
    },
    {
      xuhao: '3',
      zhanghao: '001',
      bumen: '管理',
      name: 'admin',
      xingbie: '男',
      number: '123456',
      email: '123456@qq.com',
      pingtai: '平台1',
      date: '2003-05-10',
      denglu: '123456',
    },
    {
      xuhao: '4',
      zhanghao: '001',
      bumen: '管理',
      name: 'admin',
      xingbie: '男',
      number: '123456',
      email: '123456@qq.com',
      pingtai: '平台1',
      date: '2003-05-10',
      denglu: '123456',
    },
  ]
  </script>
  <style scoped>

  .demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
  }
  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }
.table{
    height: 500px;
    border-radius: 25px;
    
}
.table-title{
    margin-top: 20px;
    margin-bottom: 20px;
    
}
#el-table{
border-radius: 15px;
}


  </style>